<template>
    <div v-watermark="watermarkConfig" class="app-container">
        <button @click="handClick">导出</button>
        <VirtuaList :list="list" class="virtua" ref="cav"></VirtuaList>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import html2canvas from 'html2canvas';
import VirtuaList from '@/components/VirtuaList.vue';
import type { WatermarkOptions } from '../../../types/watermark';
let list = new Array(1000).fill(0).map((item, index) => `第${index}条数据`)
const cav = ref<InstanceType<typeof VirtuaList> | null>(null)
const handClick = () => {
    const rendDom = cav?.value?.$el;

    html2canvas(rendDom).then(function (canvas) {
        const base64 = canvas.toDataURL('image/png');
        const a = document.createElement('a');
        a.href = base64;
        a.download = 'water.jpeg';
        const me = new MouseEvent('click')
        a.dispatchEvent(me)
    });

}
//水印
const watermarkConfig = ref<WatermarkOptions>({
    text: ['2025-6-03'],
    font: 'bold 18px Arial',
    color: 'red',
    width: 400,
    height: 300,
    rotate: -15,
    opacity: 0.3
});
</script>

<style scoped>
.app-container {
    width: 100%;
    height: 100%;
    padding: 2rem;
    background-color: #f5f5f5;
}

.virtua {
    width: 100%;
    height: 400px;
    overflow: auto;
    /* background-color: red; */
}
</style>